﻿
@{
    ViewBag.Title = "首页";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/styles/main.css" rel="stylesheet" />
<div id="app" v-cloak>
    <!--歌单轮播图-->
    <div style="width:70%;margin:0 auto; margin-top:40px;">
        <el-carousel :interval="3000" type="card" height="300px">
            <el-carousel-item v-for="item in CarouselImg" :key="item">
                <img :src="item.ImgUrl" :title="item.ListDesc" width="100%" height="100%" target="_blank" @@click="GoListInfos(item.ListId)" />
            </el-carousel-item>
        </el-carousel>
    </div>
    <!--歌单分类-->
    <div class="musicList">
        <div class="recomList">
            歌曲分类
        </div>
        <div class="forRecom">
            <el-row :gutter="20" style="width:100%;">
                <el-col :span="4" :xs="8" :sm="6" :md="6" :lg="4" :xl="4" v-for="item in CountryType">
                    <div style="width:100%;height:100%;" align="center">
                        <p style="font-size:16px;"> {{item.CountryName}}</p>
                        <div class="image04">
                            <img :src="item.CountryImg" style="width:138px;height:138px;" />
                            <div class="ovrly"></div>
                            <div class="buttons">
                                <i class="fa el-icon el-icon-video-play" @@click="GoListInfo(item.CountryId)"></i>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    <!--歌手推荐-->
    <div class="Singer">
        <div class="SingerTitle">
            <el-row>
                <el-col style="width:240px;" class="SingerTj">歌手推荐</el-col>              
            </el-row>
        </div>
        <div class="SingerList">
            <el-row :gutter="20" style="width:100%;">
                <el-col :span="4" :xs="8" :sm="6" :md="6" :lg="4" :xl="4" v-for="singer in SingerInfo" align="center">
                    <div class="image03">
                        <el-avatar :size="138" :src="singer.SingerPictrue"  ></el-avatar>
                        <div class="ovrly" @@click="SingeInfo(singer.SingerId)"></div>
                    </div>
                    <br />
                    <p>{{singer.SingerName}}</p>
                    <p style="font-size:14px;color:#808080">{{singer.MusicCount}}首歌曲</p>
                </el-col>
            </el-row>
        </div>
    </div>
    <!--获取推荐-->
    @*<div class="Activity">
        <div class="ActiveTile">
            精彩活动
        </div>
        <div class="ActiveContext">
            <el-row :gutter="20" style="width:100%;">
                <el-col :span="12" v-for="active in Activies" align="center">
                    <img :src="active.ActiveImg" :title="active.ActiveName" style="width:100%;height:100%;" />
                </el-col>
            </el-row>
        </div>
    </div>*@
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                search: '',
                tableData: [],          
                CarouselImg: [
                    {
                        ListDesc: '累了疲了，乏了困了，睡不着了。不如来听听',
                        ImgUrl: '../../SongListsImg/2534005.jpg',
                        ListId: '1001',
                    },
                    {
                        ListDesc: '深陷一个温暖、蓬松的梦。 像是酝酿着接连发生的久别重逢。 ',
                        ImgUrl: '../../SongListsImg/2545020.jpg',
                        ListId: '1002',
                    },
                    {
                        ListDesc: '你的温柔 我愿意再次接受 可不可以别再挥手',
                        ImgUrl: '../../SongListsImg/2548490.jpg',
                        ListId: '1003',
                    },
                    {
                        ListDesc: '夏天熟透了晚霞，彩虹晚风染诗般的梦 添儿呗最新专辑上线',
                        ImgUrl: '../../SongListsImg/2549455.jpg',
                        ListId: '1004',
                    }
                ],
                CountryType: [],
                SingerInfo: [],
                Activies: [
                    {
                        ActiveName: '限时半价',
                        ActiveImg: '../ActivePictrue/1577258591226.jpg',
                        ActiveId: ''
                    },
                    {
                        ActiveName: '限时半价',
                        ActiveImg: '../ActivePictrue/1578400380556.jpg',
                        ActiveId: ''
                    }
                ],

            }
        },
        methods: {
            GoListInfo(id) {
                //TypeDeilteList
                window.location.href = "/Music/TypeDeilteList?id=" + id;
            },
            GetCountryType() {
                axios.post("/Home/GetAllCountryMusic").then(res => {
                    this.CountryType = res.data.data
                })
            },
            GetTopSingerINfo() {
                axios.post('/Home/GetTopSixSinger').then(res => {
                    this.SingerInfo=res.data.data
                })
            },
            SingeInfo(val) {
                window.location.href = "/Music/SingerdetailInfo?id=" + val;
            },
        },
        mounted() {           
            this.Carcount = this.tableData.length;
            this.GetCountryType();
            this.GetTopSingerINfo();
        },
        watch: {         
        }
    })
</script>
